<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>

<style>

</style>
<script>
    var options,teachers;
    var search_keyWord = "";
    var selectID,action = null,signNumber;

    $(function() {
        init();
        datePickerInit();
        searchAction();
        dataListInit();
        bootstrapValidatorInit();

        submitAction();
        deleteAction();
        deleteBatchAction();
    })

	function init(){

        getCourse();
        if(store.get('userRole')=="2"){
            $("#add").hide();
            $("#edit").hide();
            $("#batch_delete").hide();
            $("#del").hide();
        }else{
            $("#add").show();
            $("#edit").show();
            $("#batch_delete").show();
            $("#del").show();
        }
        var teachers = '${teachers}';
        var teacher = '<option value="" selected = "selected">--请选择--</option>'+teachers;
        $("#teacherName").html(teacher);

	}

    function datePickerInit(){
        $('.form_date').datetimepicker({
            format:'yyyy-mm-dd',
            language : 'zh-CN',
            weekStart : 1,
            todayBtn : 1,
            autoClose : 1,
            todayHighlight : 1,
            startView : 2,
            forceParse : 0,
            minView:2
        });
    }
    // 搜索动作
    function searchAction() {
        $('#search_button').click(function() {
            search_keyWord = $('#search_input').val();
            tableRefresh();
        })
    }

    // 分页查询参数
    function queryParams(params) {

        var temp = {
            limit : params.limit,
            offset : params.offset,
            lessonName :$('#lessonNameSearch').val(),
            lessonClass:$('#lessonClassSearch').val(),
            startTime:$('#startTimeSearch').val(),
            endTime:$('#endTimeSearch').val()
        }
        return temp;
    }

    // 表格初始化
    function dataListInit() {
        $('#dataList').bootstrapTable(
            {
                columns : [{
                    checkbox: true,
                    align: 'center'
                }, {
                    title: 'ID',
                    formatter: function (value, row, index) {
                        return index+1;
                    },
                    align: "center"
                },
                    {
                        field : 'lesson_name',
                        title : '名称'
                    },
                    {
                        field : 'lesson_class',
                        title : '年级'
                    },
                    {
                        field : 'teacher_name',
                        title : '上课教师'
                    },
                    {
                        field : 'start_date',
                        title : '开课日期'
                    },
                    {
                        field : 'end_date',
                        title : '截止日期'
                    },
                    {
                        title : '开课时间',
                        formatter: function (value, row, index) {
							var week = row.week;
                            if(week.length>1){
                                var t="";
                                var weeks = week.split(",");
                                weeks.forEach(function (e) {
                                    t+=getWeek(e)+',';
								})
                                return t.substr(0,t.length-1)+ "  " + row.lesson_start_time + "~"
                                    + row.lesson_end_time;
							}else {
                                return getWeek(row.week) + "  " + row.lesson_start_time + "~"
                                    + row.lesson_end_time;
                            }
                        }
                    },
                    {
                        field : 'price',
                        title : '价格'
                    },
                    {
                        field : 'max_number',
                        title : '人数'
                    },
                    {
                        field : 'sign_number',
                        title : '已报名人数'
                    },
                    {
                        field : 'sign_end_time',
                        title : '报名截止日期'
                    },
                    {
                        field : 'operation',
                        title : '操作',
                        width: 180,
                        align: 'center',
                        valign: 'middle',
                        formatter : function(value, row, index) {
                            var a = '<button class="btn btn-info btn-sm view"><span>查看</span></button>';
                            var s = '<button id="edit" class="btn btn-info btn-sm edit"><span>编辑</span></button>';
                            var d = '<button id="del" class="btn btn-danger btn-sm delete"><span>删除</span></button>';
                            return a + ' ' +s + ' '+ d;
                        },
                        events : {
                            // 操作列中编辑按钮的动作
                            'click .view' : function(e, value, row, index) {
                                selectID = row.lesson_id;
                                rowEditOperation(row,'view');
                            },
                            'click .edit' : function(e, value, row, index) {
                                selectID = row.lesson_id;
                                if (store.get('userRole') == "0"){
                                    signNumber = row.sign_number;
								    rowEditOperation(row, 'edit');
                                }else{
                                    alert("无权限");
                                }
                            },
                            'click .delete' : function(e,value, row, index) {
                                selectID = row.lesson_id;
                                if (store.get('userRole') == "0") {
                                    $('#deleteWarning_modal').modal(
                                        'show');
                                }else{
                                    alert("无权限");
                                }
                            }
                        }
                    } ],
                url : '/onlineEdu/lesson/getLessonByPage',
                onLoadError:function(status){
                    handleAjaxError(status);
                },
                method : 'GET',
                queryParams : queryParams,
                sidePagination : "server",
                dataType : 'json',
                pagination : true,
                pageNumber : 1,
                pageSize: 10,
                pageList : [5, 10, 25, 50, 100 ],
                clickToSelect : true
            });
    }

    // 表格刷新
    function tableRefresh() {
        $('#dataList').bootstrapTable('refresh', {
            query : {}
        });
    }

    //课程列表
    function getCourse(){
        $.ajax({
            url:"/onlineEdu/lesson/getLessonGroup",
            type: 'GET',
            cache: false,
            data:{},
            dataType:  "json",
            async:false,
            success: function (data) {
                var options = '<option value="">--请选择--</option>'+data.lessonGroup;
                $("#lessonNameSearch").html(options);
            }
        });
    }

    // 行编辑操作
    function rowEditOperation(row,model) {

       // getTeacher();
        $('#add_modal').modal("show");
        if(model=="view"){
            $('#titleLable').html("查看数据");
            $('#modal_cancel').hide();
            $('#modal_submit').hide();
		}else{
            $('#titleLable').html("修改数据");
            $('#modal_cancel').show();
            $('#modal_submit').show();
            action="edit";
		}
        var start = row.lesson_start_time.split(":");
        var end = row.lesson_end_time.split(":");
        $('#lessonName').val(row.lesson_name);
        $('#lessonClass').val(row.lesson_class);
        $('#lessonContent').val(row.lesson_content);
        $('#startDate').val(row.start_date);
        $('#endDate').val(row.end_date);
		$('#lessonStoreId').val(row.lesson_store_id);
		$('#teacherName').val(row.teacher_name);
		$('#lessonTerm').val(row.lesson_term);
        $('#startHour').val(start[0]);
        $('#startMin').val(start[1]);
        $('#endHour').val(end[0]);
        $('#endMin').val(end[1]);
        $('#price').val(row.price);
        $('#maxNumber').val(row.max_number);
        $('#signEndTime').val(row.sign_end_time);
        $('#lessonDetailUrl').val(row.lesson_detail_url);
        $("[name='week']").removeAttr("checked");
        var week = row.week;
        if(week.length>1){
            var weeks = week.split(",");
            weeks.forEach(function (item){
                $("#ck"+item).prop("checked","checked");
            });
		}else{
            $("#ck"+week).prop("checked","checked");
		}
    }

    // 刪除信息
    function deleteAction(){
        $('#delete_confirm').click(function(){
            var ids = '';
            var rows = $("#dataList").bootstrapTable('getSelections');
            for (var i = 0; i < rows.length; i++) {
                ids += "'"+rows[i]['lesson_id'] +"'"+ ",";
            }
            ids = ids.substring(0, ids.length - 1);
            var data = {
                "lessonId" : ids
            }
            deleteData(data);
        })
    }

    function deleteBatchAction() {
        //获取所有被选中的记录
        $('#batch_delete').click(function() {
            var rows = $("#dataList").bootstrapTable('getSelections');
            if (rows.length== 0) {
                alert("请先选择要删除的记录!");
            }else {
                $('#deleteWarning_modal').modal('show');
            }
        });
    }

    function deleteData(data) {

        $.ajax({
            type : "GET",
            url : "/onlineEdu/lesson/delete",
            dataType : "json",
            contentType : "application/json",
            data : data,
            success : function(response){
                $('#deleteWarning_modal').modal("hide");
                var type;
                var msg;
                var append = '';
                if(response.success){
                    type = "success";
                    msg = "删除成功";
                }else{
                    type = "error";
                    msg = "删除失败";
                }
                tableRefresh();
                showMsg(type, msg, append);
            },
            error : function(response){
                $('#deleteWarning_modal').modal("hide");
                // handle error
                handleAjaxError(response.msg);
            }
        })
        $('#deleteWarning_modal').modal('hide');
	}
    // 添加信息
    function submitAction() {
        $('#add').click(function() {

            $('#add_modal').modal("show");
            $('#titleLable').html("添加数据");
            $('#modal_cancel').show();
            $('#modal_submit').show();
            action = 'add';
            $('#lessonName').val("");
            $('#teacherName').val("");
            $('#lessonClass').val("");
            $('#lessonContent').val("");
            $('#startDate').val("");
            $('#endDate').val("");
            $('#lessonStoreId').val("");
			$("[name='week']").removeAttr("checked");
            $('#startHour').val("");
			$('#startMin').val("");
            $('#endHour').val("");
			$('#endMin').val("");
            $('#price').val("");
            $('#maxNumber').val("");
            $('#signEndTime').val("");
            $('#lessonTerm').val("");
            $('#lessonDetailUrl').val("");
        });

        $('#modal_submit').click(function() {

            var weeks = document.getElementsByName("week"),check_val = [];
            for(var k in weeks){
                if(weeks[k].checked)
                    check_val.push(weeks[k].value);
            }
            var data = {
                lessonName:$('#lessonName').val(),
                lessonClass:$('#lessonClass').val(),
                lessonContent:$('#lessonContent').val(),
                startDate:$('#startDate').val(),
                endDate:$('#endDate').val(),
				lessonTerm:$('#lessonTerm').val(),
                teacherName:$('#teacherName').val(),
				week:check_val.toString(),
                lessonStartTime:$('#startHour').val()+":"+$('#startMin').val(),
                lessonEndTime:$('#endHour').val()+":"+$('#endMin').val(),
                lessonStoreId:$('#lessonStoreId').val(),
                price:$('#price').val(),
                maxNumber:$('#maxNumber').val(),
                signEndTime:$('#signEndTime').val(),
                lessonDetailUrl:$('#lessonDetailUrl').val()
            }
            if(!(data.lessonName&&data.lessonClass&&data.lessonContent&&
					data.startDate&&data.endDate&&data.lessonStartTime&&data.lessonTerm&&
					data.lessonEndTime&&data.price&&data.maxNumber&&data.week&&
					data.signEndTime&&data.teacherName&&data.lessonStoreId)) {
                alert("请填写完整！", "提示");
                return ;
            }
            var url;
            if(action =='edit'){
                url = "/onlineEdu/lesson/update";
                data.lessonId = selectID;
                data.signNumber=signNumber;
			}else{
                url = "/onlineEdu/lesson/save";
			}
            $.ajax({
                type : "POST",
                url :url,
                dataType : "json",
                data : data,
                success : function(response) {
                    $('#add_modal').modal("hide");
                    var msg;
                    var type;
                    var append = '';
                    tableRefresh();
                    showMsg(type, response.msg, append);
                    $("[name='week']").removeAttr("checked");
                },
                error : function(xhr, textStatus, errorThrown) {
                    $('#add_modal').modal("hide");
                    // handle error
                    handleAjaxError(xhr.status);
                }
            })
        })
    }

    function getWeek(week){
        var s = "";
        switch (week){
			case "1":s="周一";
			    break;
            case "2":s="周二";
                break;
            case "3":s="周三";
                break;
            case "4":s="周四";
                break;
            case "5":s="周五";
                break;
            case "6":s="周六";
                break;
            case "0":s="周日";
                break;
		}
		return s;
	}

</script>
<div class="panel panel-default">
	<ol class="breadcrumb">
		<li><label class="form-label">开课信息</label></li>
	</ol>
	<div class="panel-body">
		<div class="row">
			<div style="width: 100%;margin-top: -16px" class="box-content">
				<table id="信息查询" class="table table-bordered table-hover table-responsive">
					<tbody>
					<tr>
						<td class="item-title" align="center">名称</td>
						<td class="item-content-half">
							<select id="lessonNameSearch" class="form-control"></select>
						</td>
						<td class="item-title" align="center">年级</td>
						<td class="item-content-half">
							<select id="lessonClassSearch" class="form-control">
								<option value="">--请选择--</option>
								<option value="小班">小班</option>
								<option value="小升中">小升中</option>
								<option value="中班">中班</option>
								<option value="中升大">中升大</option>
								<option value="大班">大班</option>
								<option value="大升一">大升一</option>
								<option value="一年级">一年级</option>
								<option value="一升二">一升二</option>
								<option value="二年级">二年级</option>
								<option value="二升三">二升三</option>
								<option value="三年级">三年级</option>
								<option value="三升四">三升四</option>
								<option value="四年级">四年级</option>
								<option value="四升五">四升五</option>
								<option value="五年级">五年级</option>
								<option value="小升初">小升初</option>
							</select>
						</td>
						<td class="item-title" align="center">开课日期</td>
						<td class="item-content-half" style="text-align: left;width: 300px;">
							<input type="text" style="width: 130px;display: inline-block" class="form_date form-control" id="startTimeSearch" placeholder="">
							--<input type="text" style="width: 130px;display: inline-block" class="form_date form-control" id="endTimeSearch" placeholder="">
						</td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div style="text-align: right">
			<button id="search_button" style="text-align: right" class="btn btn-success">
				<span class="glyphicon glyphicon-search"></span> <span>查询</span>
			</button>
		</div>
	</div>

	<div class="row" style="margin-top: 25px">
		<div class="col-md-5">
			<button class="btn btn-sm btn-default" id="add">
				<span class="glyphicon glyphicon-plus"></span> <span>添加</span>
			</button>
			<%--<button class="btn btn-sm btn-default" id="import_student">--%>
				<%--<span class="glyphicon glyphicon-import"></span> <span>导入数据</span>--%>
			<%--</button>--%>
			<button class="btn btn-sm btn-default" id="batch_delete">
				<span class="glyphicon glyphicon-export"></span> <span>批量删除</span>
			</button>
		</div>
		<div class="col-md-5"></div>
	</div>

	<div class="row" style="margin-top: 15px">
		<div class="col-md-12">
			<table id="dataList" class="table table-striped"></table>
		</div>
	</div>
</div>
</div>

<!-- 添加信息模态框 -->
<div id="add_modal" class="modal fade" table-index="-1" role="dialog"
	 aria-labelledby="myModalLabel" aria-hidden="true"
	 data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" type="button" data-dismiss="modal"
						aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="titleLable">添加信息</h4>
			</div>
			<div class="modal-body">
				<!-- 模态框的内容 -->
				<div class="row">
					<div class="col-md-1 col-sm-1"></div>
					<div class="col-md-8 col-sm-8">
						<form class="form-horizontal" role="form" id="student_form"
							  style="margin-top: 25px">
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>课程名称：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="lessonName"
										   placeholder="课程名称">
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>年级：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<select id="lessonClass" class="form-control">
										<option value="">--请选择--</option>
										<option value="小班">小班</option>
										<option value="小升中">小升中</option>
										<option value="中班">中班</option>
										<option value="中升大">中升大</option>
										<option value="大班">大班</option>
										<option value="大升一">大升一</option>
										<option value="一年级">一年级</option>
										<option value="一升二">一升二</option>
										<option value="二年级">二年级</option>
										<option value="二升三">二升三</option>
										<option value="三年级">三年级</option>
										<option value="三升四">三升四</option>
										<option value="四年级">四年级</option>
										<option value="四升五">四升五</option>
										<option value="五年级">五年级</option>
										<option value="小升初">小升初</option>
									</select>
								</div>
							</div>
							<div class="form-group divform">
								<label  class="control-label col-md-4 col-sm-4"> <span>简介：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="lessonContent"
										   placeholder="简介">
								</div>
							</div>
							<div class="form-group divform">
								<label  class="control-label col-md-4 col-sm-4"> <span>课程微店号：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="lessonStoreId"
										   placeholder="课程微店号">
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>课程开始日期：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form_date form-control" id="startDate"
									      placeholder="开始日期">
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>课程截止日期：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form_date form-control" id="endDate"
										   placeholder="截止日期">
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>报名截止时间：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form_date form-control" id="signEndTime"
										   placeholder="报名截止时间">
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>上课教师：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<select type="text" class="form-control" id="teacherName"
											placeholder="--请选择--">
									</select>
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>课程学期：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<select type="text" class="form-control" id="lessonTerm">
										<option value="">-请选择-</option>
										<option value="春季班">春季班</option>
										<option value="秋季班">秋季班</option>
										<option value="暑期班">暑期班</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>上课周次：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="checkbox" name="week" id="ck1" value="1"/><span>周一</span>
									<input type="checkbox" name="week" id="ck2" value="2"/><span>周二</span>
									<input type="checkbox" name="week" id="ck3" value="3"/><span>周三</span>
									<input type="checkbox" name="week" id="ck4" value="4"/><span>周四</span>
									<input type="checkbox" name="week" id="ck5" value="5"/><span>周五</span>
									<input type="checkbox" name="week" id="ck6" value="6"/><span>周六</span>
									<input type="checkbox" name="week" id="ck0" value="0"/><span>周日</span>
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>上课时间段：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" style="width: 50px;display: inline-block"
									   class="form-control" id="startHour" placeholder="17">:
									<input type="text" style="width: 50px;display: inline-block"
									   class="form-control" id="startMin" placeholder="00">至
									<input type="text" style="width: 50px;display: inline-block"
									   class="form-control" id="endHour" placeholder="19">:
									<input type="text" style="width: 50px;display: inline-block"
									   class="form-control" id="endMin" placeholder="30">
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>课程广告链接：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="lessonDetailUrl"
										   placeholder="课程广告链接">
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>价格：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="price"
										   placeholder="价格">
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>上课人数：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="maxNumber"
										   placeholder="上课人数">
								</div>
							</div>
						</form>
					</div>
					<div class="col-md-1 col-sm-1"></div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default" type="button" data-dismiss="modal" id="modal_cancel">
					<span>取消</span>
				</button>
				<button class="btn btn-success" type="button" id="modal_submit">
					<span>提交</span>
				</button>
			</div>
		</div>
	</div>
</div>

<!-- 删除提示模态框 -->
<div class="modal fade" id="deleteWarning_modal" table-index="-1"
	 role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" type="button" data-dismiss="modal"
						aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabelee">警告</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-md-3 col-sm-3" style="text-align: center;">
						<img src="" alt=""
							 style="width: 70px; height: 70px; margin-top: 20px;">
					</div>
					<div class="col-md-8 col-sm-8">
						<h3>是否确认删除该条记录</h3>
						<p></p>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default" type="button" data-dismiss="modal">
					<span>取消</span>
				</button>
				<button class="btn btn-danger" type="button" id="delete_confirm">
					<span>确认删除</span>
				</button>
			</div>
		</div>
	</div>
</div>